import React, { memo, useEffect, useState } from "react";
import { getGeneralCheck } from "@common/envOverviewApi/doc";
import { GeneralCheckInitialState } from "@model";
import Highlight from "react-highlight";
import "highlight.js/styles/vs2015.css";
import "./style.less";
import { Collapse, Empty, message } from "antd";
import { Link } from "react-router-dom";

type Props = {
  nodeName: string;
};

/**
 * @func 初始化检查页面组件
 * @param props
 * @returns React.FC
 */
const GeneralCheck: React.FC<Props> = (props) => {
  const [data, setData] = useState(GeneralCheckInitialState);

  const { nodeName } = props;

  const { Panel } = Collapse;

  useEffect(() => {
    getGeneralCheckData();
  }, []);

  const getGeneralCheckData = async () => {
    try {
      const json = await getGeneralCheck(nodeName);
      if (
        json._source.generalcheck &&
        !Array.isArray(json._source.generalcheck)
      ) {
        message.error("数据类型错误！");
      }
      setData(json);
    } catch (err) {}
  };

  return (
    <div className="general-check">
      {data.found &&
      data._source.generalcheck &&
      Array.isArray(data._source.generalcheck) ? (
        <Collapse defaultActiveKey={["0"]}>
          {data._source.generalcheck.map((item, index) => (
            <Panel
              header={
                <span style={{ color: item.checkstatus ? "green" : "red" }}>
                  {item.name}
                </span>
              }
              key={index}
              extra={
                item.checkstatus ? (
                  <span style={{ color: "green" }}>正常</span>
                ) : (
                  <span style={{ color: "red" }}>异常</span>
                )
              }
            >
              <div className="general-check-header">
                <div className="general-check-header-conten">
                  <p>初始化校验状态:</p>
                  <span>{item.checkstatus ? "正常" : "异常"}</span>
                </div>
                <div className="general-check-header-conten">
                  <p>配置ID:</p>
                  {item.checkid !== null && item.checkid !== "" ? (
                    <span>
                      <Link
                        to={{
                          pathname: `/collect/modify/check/${item.checkid}`,
                        }}
                      >
                        {item.checkid}
                      </Link>
                    </span>
                  ) : (
                    <span>null</span>
                  )}
                </div>
                <div className="general-check-header-conten">
                  <p>校验时间:</p>
                  {item.time && <span>{item.time}</span>}
                </div>
              </div>
              <div className="general-check-content">
                <p>校验详情:</p>
                <Highlight>{item.output}</Highlight>
              </div>
            </Panel>
          ))}
        </Collapse>
      ) : data.found &&
        data._source.generalcheck &&
        !Array.isArray(data._source.generalcheck) ? (
        <Empty
          image={Empty.PRESENTED_IMAGE_SIMPLE}
          description={<span>数据类型错误！</span>}
        />
      ) : (
        <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
      )}
    </div>
  );
};

export default memo(GeneralCheck);
